<!--<template>-->
<!--  <div class="order-create-container">-->
<!--    <div class="page-header">-->
<!--      <h2 class="page-title">创建订单</h2>-->
<!--      <div>-->
<!--        <el-button @click="goBack">返回</el-button>-->
<!--        <el-button :loading="submitting" type="primary" @click="submitForm">保存</el-button>-->
<!--      </div>-->
<!--    </div>-->

<!--    <el-card class="form-card">-->
<!--      <el-form-->
<!--          ref="formRef"-->
<!--          :model="orderForm"-->
<!--          :rules="rules"-->
<!--          label-position="right"-->
<!--          label-width="90px"-->
<!--          status-icon-->
<!--      >-->
<!--        <el-divider content-position="left">基本信息</el-divider>-->
<!--        <el-row :gutter="20">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="订单编号" prop="orderNumber">-->
<!--              <el-input v-model="orderForm.orderNumber" disabled placeholder="系统自动生成"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="采购日期" prop="purchaseDate">-->
<!--              <el-date-picker-->
<!--                  v-model="orderForm.purchaseDate"-->
<!--                  placeholder="选择采购日期"-->
<!--                  style="width: 100%"-->
<!--                  type="date"-->
<!--                  value-format="YYYY-MM-DD"-->
<!--              ></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row :gutter="20">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="供应商名称" prop="supplierName">-->
<!--              <el-select-->
<!--                  v-model="orderForm.supplierName"-->
<!--                  :remote-method="remoteSearchSupplier"-->
<!--                  filterable-->
<!--                  placeholder="请选择供应商"-->
<!--                  remote-->
<!--                  style="width: 100%"-->
<!--              >-->
<!--                <el-option-->
<!--                    v-for="item in supplierOptions"-->
<!--                    :key="item.name"-->
<!--                    :label="item.name"-->
<!--                    :value="item.name"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="订单状态" prop="status">-->
<!--              <el-select v-model="orderForm.status" placeholder="请选择状态" style="width: 100%">-->
<!--                <el-option label="待收货" value="待收货"></el-option>-->
<!--                <el-option label="已收货" value="已收货"></el-option>-->
<!--                <el-option label="已开票" value="已开票"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row :gutter="20">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="预计交付日期" prop="expectedDeliveryDate">-->
<!--              <el-date-picker-->
<!--                  v-model="orderForm.expectedDeliveryDate"-->
<!--                  placeholder="选择预计交付日期"-->
<!--                  style="width: 100%"-->
<!--                  type="date"-->
<!--                  value-format="YYYY-MM-DD"-->
<!--              ></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="采购员" prop="purchaser">-->
<!--              <el-input v-model="orderForm.purchaser" placeholder="请输入采购员姓名"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-form-item label="备注" prop="remark">-->
<!--          <el-input-->
<!--              v-model="orderForm.remark"-->
<!--              :rows="2"-->
<!--              placeholder="请输入备注信息"-->
<!--              type="textarea"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->

<!--        <el-divider content-position="left">商品信息</el-divider>-->
<!--        <div class="table-actions">-->
<!--          <el-button type="primary" @click="addGoodsRow">-->
<!--            <el-icon class="mr-1">-->
<!--              <Plus/>-->
<!--            </el-icon>-->
<!--            添加商品-->
<!--          </el-button>-->
<!--        </div>-->

<!--        <el-table :data="orderForm.items" border style="width: 100%; margin-bottom: 20px">-->
<!--          <el-table-column align="center" label="序号" type="index" width="60"></el-table-column>-->
<!--          <el-table-column label="商品名称" min-width="300">-->
<!--            <template #default="scope">-->
<!--              <el-form-item-->
<!--                  :prop="'items.' + scope.$index + '.itemName'"-->
<!--                  :rules="[{ required: true, message: '商品名称不能为空', trigger: 'blur' }]"-->
<!--                  style="margin-bottom: 0;"-->
<!--              >-->
<!--                <el-input-->
<!--                    v-model="scope.row.itemName"-->
<!--                    placeholder="请输入商品名称">-->
<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="规格型号" min-width="180">-->
<!--            <template #default="scope">-->
<!--              <el-form-item-->
<!--                  :prop="'items.' + scope.$index + '.specification'"-->
<!--                  style="margin-bottom: 0;"-->
<!--              >-->
<!--                <el-input-->
<!--                    v-model="scope.row.specification"-->
<!--                    placeholder="请输入规格">-->
<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="单位" width="120">-->
<!--            <template #default="scope">-->
<!--              <el-form-item-->
<!--                  :prop="'items.' + scope.$index + '.unit'"-->
<!--                  :rules="[{ required: true, message: '单位不能为空', trigger: 'blur' }]"-->
<!--                  style="margin-bottom: 0;"-->
<!--              >-->
<!--                <el-input-->
<!--                    v-model="scope.row.unit"-->
<!--                    placeholder="如：个、箱">-->
<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="数量" width="140">-->
<!--            <template #default="scope">-->
<!--              <el-form-item-->
<!--                  :prop="'items.' + scope.$index + '.quantity'"-->
<!--                  :rules="[-->
<!--                  { required: true, message: '数量不能为空', trigger: 'blur' },-->
<!--                  { type: 'number', min: 0.01, message: '数量必须大于0', trigger: 'blur' }-->
<!--                ]"-->
<!--                  style="margin-bottom: 0;"-->
<!--              >-->
<!--                <el-input-number-->
<!--                    v-model="scope.row.quantity"-->
<!--                    :min="0.01"-->
<!--                    :precision="2"-->
<!--                    controls-position="right"-->
<!--                    style="width: 100%;"-->
<!--                    @change="() => calculateRowAmount(scope.$index)"-->
<!--                ></el-input-number>-->
<!--              </el-form-item>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="单价(元)" width="180">-->
<!--            <template #default="scope">-->
<!--              <el-form-item-->
<!--                  :prop="'items.' + scope.$index + '.unitPrice'"-->
<!--                  :rules="[-->
<!--                  { required: true, message: '单价不能为空', trigger: 'blur' },-->
<!--                  { type: 'number', min: 0.01, message: '单价必须大于0', trigger: 'blur' }-->
<!--                ]"-->
<!--                  style="margin-bottom: 0;"-->
<!--              >-->
<!--                <el-input-number-->
<!--                    v-model="scope.row.unitPrice"-->
<!--                    :min="0.01"-->
<!--                    :precision="2"-->
<!--                    :step="0.01"-->
<!--                    controls-position="right"-->
<!--                    style="width: 100%;"-->
<!--                    @change="() => calculateRowAmount(scope.$index)"-->
<!--                ></el-input-number>-->
<!--              </el-form-item>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column align="right" label="金额(元)" width="140">-->
<!--            <template #default="scope">-->
<!--              <el-form-item :prop="'items.' + scope.$index + '.total'" style="margin-bottom: 0;">-->
<!--                <span class="amount-text">{{ formatCurrency(scope.row.total) }}</span>-->
<!--              </el-form-item>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column align="center" fixed="right" label="操作" width="80">-->
<!--            <template #default="{ $index }">-->
<!--              <el-button size="small" type="danger" @click="removeGoodsRow($index)">-->
<!--                <el-icon>-->
<!--                  <Delete/>-->
<!--                </el-icon>-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->

<!--        <div class="amount-summary">-->
<!--          <span class="label">订单总金额：</span>-->
<!--          <span class="value">{{ formatCurrency(totalAmount) }}</span>-->
<!--        </div>-->
<!--      </el-form>-->
<!--    </el-card>-->
<!--  </div>-->
<!--</template>-->

<!--<script lang="ts" setup>-->
<!--import {computed, onMounted, reactive, ref} from 'vue';-->
<!--import {useRouter} from 'vue-router';-->
<!--import type {FormInstance, FormRules} from 'element-plus';-->
<!--import {ElMessage, ElMessageBox} from 'element-plus';-->
<!--import {Delete, Plus} from '@element-plus/icons-vue';-->
<!--import {createOrder} from '@/api/order'; // 导入createOrder API-->

<!--// 路由-->
<!--const router = useRouter();-->
<!--const formRef = ref<FormInstance>();-->
<!--const submitting = ref(false);-->

<!--// 供应商选项-->
<!--const supplierOptions = ref([-->
<!--  {name: '上海某某电子有限公司'},-->
<!--  {name: '北京某某科技有限公司'},-->
<!--  {name: '广州电子科技有限公司'}-->
<!--]);-->

<!--// 订单表单-->
<!--const orderForm = reactive({-->
<!--  orderNumber: '系统自动生成',-->
<!--  purchaseDate: new Date().toISOString().split('T')[0], // 默认今天-->
<!--  supplierName: '',-->
<!--  status: '待收货', // 默认状态-->
<!--  expectedDeliveryDate: '',-->
<!--  purchaser: '',-->
<!--  remark: '',-->
<!--  items: [createEmptyGoodsRow()] // 默认一行商品-->
<!--});-->

<!--// 表单验证规则-->
<!--const rules = reactive<FormRules>({-->
<!--  purchaseDate: [-->
<!--    {required: true, message: '请选择采购日期', trigger: 'change'}-->
<!--  ],-->
<!--  supplierName: [-->
<!--    {required: true, message: '请选择供应商', trigger: 'change'}-->
<!--  ],-->
<!--  status: [-->
<!--    {required: true, message: '请选择订单状态', trigger: 'change'}-->
<!--  ],-->
<!--  expectedDeliveryDate: [-->
<!--    {required: true, message: '请选择预计交付日期', trigger: 'change'}-->
<!--  ],-->
<!--  purchaser: [-->
<!--    {required: true, message: '请输入采购员姓名', trigger: 'blur'}-->
<!--  ]-->
<!--});-->

<!--// 创建空商品行-->
<!--function createEmptyGoodsRow() {-->
<!--  return {-->
<!--    itemName: '',-->
<!--    specification: '',-->
<!--    unit: '',-->
<!--    quantity: 1,-->
<!--    unitPrice: 0,-->
<!--    total: 0,-->
<!--    _id: Date.now() + Math.random().toString(36).substr(2, 9) // 生成唯一ID-->
<!--  };-->
<!--}-->

<!--// 添加商品行-->
<!--function addGoodsRow() {-->
<!--  orderForm.items.push(createEmptyGoodsRow());-->
<!--}-->

<!--// 删除商品行-->
<!--function removeGoodsRow(index: number) {-->
<!--  if (orderForm.items.length === 1) {-->
<!--    ElMessage.warning('至少需要一条商品信息');-->
<!--    return;-->
<!--  }-->
<!--  orderForm.items.splice(index, 1);-->
<!--  calculateTotalAmount();-->
<!--}-->

<!--// 计算单行商品金额-->
<!--function calculateRowAmount(index: number) {-->
<!--  const item = orderForm.items[index];-->
<!--  if (item.quantity && item.unitPrice) {-->
<!--    item.total = Number((item.quantity * item.unitPrice).toFixed(2));-->
<!--  } else {-->
<!--    item.total = 0;-->
<!--  }-->
<!--  calculateTotalAmount();-->
<!--}-->

<!--// 计算总金额-->
<!--function calculateTotalAmount() {-->
<!--  let amount = 0;-->
<!--  orderForm.items.forEach(item => {-->
<!--    amount += Number(item.total) || 0;-->
<!--  });-->
<!--  return amount;-->
<!--}-->

<!--// 计算总金额（计算属性）-->
<!--const totalAmount = computed(() => {-->
<!--  return calculateTotalAmount();-->
<!--});-->

<!--// 页面加载-->
<!--onMounted(() => {-->
<!--  // 在实际项目中可能需要获取初始数据，如自动生成的订单编号等-->
<!--});-->

<!--// 返回列表页-->
<!--const goBack = () => {-->
<!--  ElMessageBox.confirm('是否确认放弃当前编辑的内容？', '提示', {-->
<!--    confirmButtonText: '确定',-->
<!--    cancelButtonText: '取消',-->
<!--    type: 'warning'-->
<!--  }).then(() => {-->
<!--    router.push('/dashboard/order-list');-->
<!--  }).catch(() => {-->
<!--  });-->
<!--};-->

<!--// 远程搜索供应商-->
<!--const remoteSearchSupplier = (query: string) => {-->
<!--  // 实际项目中，应该调用API进行搜索-->
<!--  if (query) {-->
<!--    const filtered = supplierOptions.value.filter(item =>-->
<!--        item.name.toLowerCase().includes(query.toLowerCase())-->
<!--    );-->
<!--    // supplierOptions.value = filtered;-->
<!--  }-->
<!--};-->

<!--// 提交表单-->
<!--const submitForm = async () => {-->
<!--  if (!formRef.value) return;-->

<!--  submitting.value = true;-->

<!--  try {-->
<!--    // 验证主表单-->
<!--    let mainValid = false;-->
<!--    await formRef.value.validate((valid) => {-->
<!--      mainValid = valid;-->
<!--    });-->

<!--    if (!mainValid) {-->
<!--      ElMessage.error('请修正表单中的错误');-->
<!--      return;-->
<!--    }-->

<!--    // 构建提交数据-->
<!--    const submitData = {-->
<!--      orderNumber: orderForm.orderNumber,-->
<!--      purchaseDate: orderForm.purchaseDate,-->
<!--      supplierName: orderForm.supplierName,-->
<!--      status: orderForm.status,-->
<!--      expectedDeliveryDate: orderForm.expectedDeliveryDate,-->
<!--      purchaser: orderForm.purchaser,-->
<!--      remark: orderForm.remark,-->
<!--      totalAmount: totalAmount.value,-->
<!--      items: orderForm.items.map(item => ({-->
<!--        itemName: item.itemName,-->
<!--        specification: item.specification,-->
<!--        unit: item.unit,-->
<!--        quantity: Number(item.quantity),-->
<!--        unitPrice: Number(item.unitPrice),-->
<!--        total: Number(item.total)-->
<!--      }))-->
<!--    };-->

<!--    // 发送请求-->
<!--    const res = await createOrder(submitData);-->

<!--    if (res.code === 200) {-->
<!--      ElMessage.success('订单创建成功');-->
<!--      router.push('/dashboard/order-list');-->
<!--    } else {-->
<!--      ElMessage.error(res.message || '创建订单失败');-->
<!--    }-->
<!--  } catch (error: any) {-->
<!--    console.error('创建订单失败', error);-->
<!--    ElMessage.error(error.message || '创建订单失败，请稍后再试');-->
<!--  } finally {-->
<!--    submitting.value = false;-->
<!--  }-->
<!--};-->

<!--// 格式化货币显示-->
<!--const formatCurrency = (value: number | string) => {-->
<!--  if (value === undefined || value === null || value === '') return '¥0.00';-->
<!--  const num = typeof value === 'string' ? parseFloat(value) : value;-->
<!--  return `¥${num.toFixed(2)}`;-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.order-create-container {-->
<!--  padding: 20px;-->
<!--}-->

<!--.page-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.page-title {-->
<!--  margin: 0;-->
<!--  font-size: 20px;-->
<!--  font-weight: 600;-->
<!--}-->

<!--.form-card {-->
<!--  margin-bottom: 20px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--  border-radius: 6px;-->
<!--}-->

<!--.table-actions {-->
<!--  margin-bottom: 15px;-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--}-->

<!--.amount-summary {-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--  margin-top: 24px;-->
<!--  font-size: 16px;-->
<!--  padding: 10px 20px;-->
<!--  background-color: #f8f8f8;-->
<!--  border-radius: 4px;-->
<!--}-->

<!--.amount-summary .label {-->
<!--  font-weight: bold;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.amount-summary .value {-->
<!--  color: #f56c6c;-->
<!--  font-weight: bold;-->
<!--  font-size: 18px;-->
<!--}-->

<!--.amount-text {-->
<!--  color: #f56c6c;-->
<!--  font-weight: 500;-->
<!--}-->

<!--/* 表格样式优化 */-->
<!--.el-table {-->
<!--  border-radius: 6px;-->
<!--  overflow: hidden;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);-->
<!--}-->

<!--.el-table th {-->
<!--  background-color: #f5f7fa !important;-->
<!--  font-weight: 600;-->
<!--  color: #333;-->
<!--}-->

<!--/* 表单错误样式 */-->
<!--:deep(.el-table .el-form-item__error) {-->
<!--  position: absolute;-->
<!--  top: 100%;-->
<!--  left: 0;-->
<!--  padding-top: 2px;-->
<!--  font-size: 12px;-->
<!--}-->

<!--/* 表格行悬停效果 */-->
<!--:deep(.el-table&#45;&#45;enable-row-hover .el-table__body tr:hover > td.el-table__cell) {-->
<!--  background-color: #f5f7fa;-->
<!--}-->

<!--/* 修复表格中输入框的显示问题 */-->
<!--:deep(.el-table .el-form-item__content) {-->
<!--  margin-left: 0 !important;-->
<!--}-->

<!--.mr-1 {-->
<!--  margin-right: 5px;-->
<!--}-->

<!--/* 优化数字输入框样式 */-->
<!--:deep(.el-input-number .el-input__wrapper) {-->
<!--  padding-right: 30px !important;-->
<!--}-->

<!--:deep(.el-input-number__increase),-->
<!--:deep(.el-input-number__decrease) {-->
<!--  z-index: 1 !important;-->
<!--}-->

<!--:deep(.el-table .el-input-number) {-->
<!--  width: 100%;-->
<!--}-->

<!--:deep(.el-table .cell) {-->
<!--  padding: 0 5px !important;-->
<!--}-->
<!--</style>-->